<template>
    <n-data-table
        :columns="columns"
        :data="prediction"
        :scroll-x="1000"
        max-height="800"
    ></n-data-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { DailyWeatherPrediction } from "@/types/prediction";
import { fileDetailColumns } from "@/utils/table-column";

import { getStore } from "@/store";
import axios from "axios";

const props = defineProps<{
    filePath: string;
}>();

const predictStore = getStore("prediction");

const columns = fileDetailColumns;
const prediction = ref<DailyWeatherPrediction[]>([]);

onMounted(async () => {
    if (predictStore.checkDetailExisted(props.filePath)) {
        prediction.value = predictStore.getFileDetail(props.filePath);
        return;
    }
    try {
        const res = (await axios.get<DailyWeatherPrediction[]>(props.filePath))
            .data;
        // 源文件没有index属性，要手动添加
        if (!Object.keys(res).includes("index")) {
            res.forEach((item, index) => {
                item.index = index;
            });
        }
        prediction.value = res;
        predictStore.addFileDetail(props.filePath, res);
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
});
</script>

<style scoped>
* {
    user-select: none;
}
</style>
